<template>
	<view class="content">
		<view class="nav_list">
			<u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
		</view>
		 <view class="consumption_list">
		 	<view class="consumption_item" v-for="(goodsitem,goodsindex) in goodslist" :key="goodsindex" v-if="curNow==0">
		 		<view class="consumption_itemtop">
		 			<text>订单号:{{goodsitem.order}}</text>
					<view class="consumption_edit">
						{{goodsitem.time}}
					</view>
		 		</view>
				<view class="consumption_itemcontent">
					<view class="consumption_content">
						<text>商品数量</text><text>{{goodsitem.num}}</text>
					</view>
					<view class="consumption_content">
						<text>消费金额</text><text>¥{{goodsitem.money}}</text>
					</view>
					<view class="consumption_content">
						<text>支付方式</text><text>{{goodsitem.mode}}</text>
					</view>
					<view class="consumption_content">
						<text>收银员</text><text>{{goodsitem.name}}</text>
					</view>
					<view class="consumption_content">
						<text>实收款</text><text style="color: #ff4b4b;font-size: 36rpx;font-weight: 700;">¥{{goodsitem.actual}}</text>
					</view>
				</view>
		 	</view>
			<view class="consumption_item" v-for="(rechargeitem,rechargeindex) in rechargelist" :key="rechargeindex" v-else>
				<view class="consumption_itemtop">
					<text>卡号:{{rechargeitem.order}}</text>
					<view class="consumption_edit">
						{{rechargeitem.time}}
					</view>
				</view>
				<view class="consumption_itemcontent">
					<view class="consumption_content">
						<text>充值类型</text><text>{{rechargeitem.mode}}</text>
					</view>
					<view class="consumption_content">
						<text>消费金额</text><text>¥{{rechargeitem.money}}</text>
					</view>
					<view class="consumption_content">
						<text>到期时间</text><text>{{rechargeitem.expiretime}}</text>
					</view>
					<view class="consumption_content">
						<text>收银员</text><text>{{rechargeitem.name}}</text>
					</view>
					<view class="consumption_content">
						<text>实收款</text><text style="color: #ff4b4b;font-size: 36rpx;font-weight: 700;">¥{{rechargeitem.actual}}</text>
					</view>
				</view>
			</view>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				goodslist:[
					{id:1,mode:"微信支付",order:"456123789",actual:"20.0",money:"30.0",time:"2021-06-06 15:20",name:"一秋",num:5},
					{id:2,mode:"微信支付",order:"456123789",actual:"20.0",money:"30.0",time:"2021-06-06 15:20",name:"一秋",num:5},
					{id:3,mode:"微信支付",order:"456123789",actual:"20.0",money:"30.0",time:"2021-06-06 15:20",name:"一秋",num:5},
					{id:4,mode:"微信支付",order:"456123789",actual:"20.0",money:"30.0",time:"2021-06-06 15:20",name:"一秋",num:5},
					{id:5,mode:"微信支付",order:"456123789",actual:"20.0",money:"30.0",time:"2021-06-06 15:20",name:"一秋",num:5},
					{id:6,mode:"微信支付",order:"456123789",actual:"20.0",money:"30.0",time:"2021-06-06 15:20",name:"一秋",num:5},
					{id:7,mode:"微信支付",order:"456123789",actual:"20.0",money:"30.0",time:"2021-06-06 15:20",name:"一秋",num:5},
					{id:8,mode:"微信支付",order:"456123789",actual:"20.0",money:"30.0",time:"2021-06-06 15:20",name:"一秋",num:5},
					
				],
				rechargelist:[
					{id:1,mode:"折扣卡",order:"456123789",actual:"20.0",money:"30.0",time:"2021-06-06 15:20",name:"一秋",expiretime:"2021-07-06 15:20"},
					{id:2,mode:"折扣卡",order:"456123789",actual:"20.0",money:"30.0",time:"2021-06-06 15:20",name:"一秋",expiretime:"2021-07-06 15:20"},
					{id:3,mode:"折扣卡",order:"456123789",actual:"20.0",money:"30.0",time:"2021-06-06 15:20",name:"一秋",expiretime:"2021-07-06 15:20"},
					{id:4,mode:"折扣卡",order:"456123789",actual:"20.0",money:"30.0",time:"2021-06-06 15:20",name:"一秋",expiretime:"2021-07-06 15:20"},
					{id:5,mode:"折扣卡",order:"456123789",actual:"20.0",money:"30.0",time:"2021-06-06 15:20",name:"一秋",expiretime:"2021-07-06 15:20"},
					{id:6,mode:"折扣卡",order:"456123789",actual:"20.0",money:"30.0",time:"2021-06-06 15:20",name:"一秋",expiretime:"2021-07-06 15:20"},
					{id:7,mode:"折扣卡",order:"456123789",actual:"20.0",money:"30.0",time:"2021-06-06 15:20",name:"一秋",expiretime:"2021-07-06 15:20"},
					{id:8,mode:"折扣卡",order:"456123789",actual:"20.0",money:"30.0",time:"2021-06-06 15:20",name:"一秋",expiretime:"2021-07-06 15:20"},
					
				],
				list: [
					{
						name: '消费记录'
					}, 
					{
						name: '充值记录'
					}
				],
				curNow: 0
			}
		},
		onLoad() {

		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
				console.log(this.curNow)
			}
		}
	}
</script>

<style>
page{
	background: #f6f6f6;
}
.consumption_list{
	width: 90%;
	margin: 0 5%;
}
.consumption_item{
	background: #fff;
	margin: 20rpx 0;
	border-radius: 10rpx;
	box-shadow: 2rpx 2rpx 10rpx #eee;
	padding: 20rpx;
	padding-bottom: 0;
}
.consumption_itemtop{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.consumption_itemtop text{
	flex: 1;
	font-weight: 700;
}
.consumption_edit{
	width: 220rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	font-size: 24rpx;
}
.consumption_content{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 0;
	font-size: 28rpx;
	color: #333;
}
.nav_list{
	width: 90%;
	margin: 2% 5%;
}
.u-item-bg{
	bottom: 12rpx !important;
}
</style>
